<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/LargeScreen.css">
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <script src="../assets/module/gcjsy/js/echarts.min.js"></script>
</head>
<body>
<div class="main">
  <div class="main-header clear">
    <div class="main-logo">
      <div class="mian-logo-card">
        <img src="img/logo.png" alt="">
      </div>
      <div class="main-logo-text">
        <h3>合肥市数据监控看板</h3>
        <p>He Fei Data Monitoring Billboard</p>
      </div>
    </div>
    <div class="main-weather">
      <div class="weather-icon">
        <img src="img/sun.png" alt="">
        <img src="img/sun.png" alt="">
        <img src="img/sun.png" alt="">
        <img src="img/sun.png" alt="">
      </div>

      <div class="weather-temperature" id="weatherData">
        <div>
          <p>20℃~29℃</p>
          <span>1 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>2 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>3 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>4 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>5 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>6 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>7 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>1 晴</span>
        </div>
      </div>
      <div class="weather-date">
        <p id="nowTime"></p>
        <span id="nowData"></span>
      </div>
    </div>
  </div>
  <div class="main-left">
    <section>
      <h3 class="main-title">
        <span>总体数据概览</span>
      </h3>
      <ul class="total-data clear">
        <li>
          <p class="data-title">运输企业</p>
          <p class="data-number">150<span>家</span></p>
          <img src="img/data1.png" alt="">
        </li>
        <li>
          <p class="data-title">运输车辆</p>
          <p class="data-number">5000<span>俩</span></p>
          <img src="img/data2.png" alt="">
        </li>
        <li>
          <p class="data-title">建筑工地</p>
          <p class="data-number">150<span>个</span></p>
          <img src="img/data3.png" alt="">
        </li>
        <li>
          <p class="data-title">消纳场</p>
          <p class="data-number">5000<span>个</span></p>
          <img src="img/data4.png" alt="">
        </li>
      </ul>
    </section>
    <section class="violations">
      <h3 class="main-title">
        <span>违规报警趋势（近七日）</span>
      </h3>
      <div class="violation-trend" id="charts1"></div>
    </section>
    <section>
      <h3 class="main-title">
        <span>违规报警类型（近七日）</span>
      </h3>
      <div class="violation-type" id="charts2">

      </div>
      <div class="v-type-box">
        <div class="v-type-item"><label>设备离线（13条）</label><span>26.9%</span></div>
        <div class="v-type-item"><label>车辆超速（121条）</label><span>24%</span></div>
        <div class="v-type-item"><label>路线偏离（12条）</label><span>21.2%</span></div>
        <div class="v-type-item"><label>车辆违规（1条）</label><span>19.5%</span></div>
        <div class="v-type-item"><label>企业违规（3条）</label><span>8.3%</span></div>
      </div>
    </section>
  </div>
  <div class="main-right">
    <div class="map" id="mapBox" style="width: 100%;height: 800px">


    </div>
    <div class="situation clear">
      <h3 class="main-title">
        <span>今日违规报警情况</span>
      </h3>
      <div class="situation-left clear">
        <div class="pie" id="charts3"></div>
        <ul class="total-data clear">
            <li>
              <p class="data-title">运输企业</p>
              <p class="data-number">150<span>家</span></p>
              <img src="img/data1.png" alt="">
            </li>
            <li>
              <p class="data-title">运输车辆</p>
              <p class="data-number">5000<span>俩</span></p>
              <img src="img/data2.png" alt="">
            </li>
          </ul>
      </div>
      <div class="situation-right" id="charts4">

      </div>

    </div>
  </div>
</div>
<script src="../assets/plugins/art-template/template.js"></script>
<script src="js/LargeScreen.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
     <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>
    <script src="js/areaJson.js"></script>
   <!-- <script src="js/map.js"></script>-->

<script type="text/html" id="weatherTpl">
  {{each obj as s}}
  <div>
    <p>{{s.low}}~{{s.high}}</p>
    <span>{{s.date}} {{s.type}}</span>
  </div>
  {{/each}}
</script>
<script>
  $(function () {
    showLeftTime();
    getWeather();

  });

  function weatherEvent() {
    var index=0;
    setInterval(function(){
      index++;
      if(index<=4){
        scrollHeight=-48*index;
        $(".weather-temperature>div").each(function () {
          $(this).animate({
            "top":scrollHeight+"px"
          },1000)

        });
        $(".weather-icon>img").each(function () {
          $(this).animate({
            "top":scrollHeight+"px"
          },1000)
        })
      }else{
        $(".weather-temperature>div").each(function () {
          $(this).css("top","0px");
        });
        $(".weather-icon>img").each(function () {
          $(this).css("top","0px");
        });
        index=0;
      }

    },5000);

  }

  function getWeather() {
/*星期一：MON
* 星期二:TUE
*星期三：WED
* 星期四:THU
* 星期五:FRI
* 星期六：SAT
*星期日：SUN*/


    $.ajax({
      method: "get",
      url: "http://wthrcdn.etouch.cn/weather_mini?city=" + encodeURIComponent('合肥'),
      success: function (result) {
        var obj = JSON.parse(result);
        var smg = obj.data.forecast;

        var info=[];
        for (var i=0;i<smg.length;i++) {

          var s = smg[i];
          var date1 = s.date;
          var d = date1.substring(date1.length-1,date1.length);
          var date = '';
          if(d=='一'){
            date='MON'
          }else if(d=='二'){
            date='TUE'
          }else if(d=='三'){
            date='WED'
          }else if(d=='四'){
            date='THU'
          }else if(d=='五'){
            date='FRI'
          }else if(d=='六'){
            date='SAT'
          }else if(d=='日'){
            date='SUN'
          }
          var high = s.high.substring(3,s.high.length);
          var low = s.low.substring(3,s.low.length);
          var type = s.type;

          if(type.indexOf("雨")){

          }

          info.push({
            'date':date,
            'high':high,
            'low':low,
            'type':type
          });
        }

        $("#weatherData").html(template("weatherTpl", {'obj':info}));
        weatherEvent();
      }
    });
  }


  var mapBoxEchart = echarts.init(document.getElementById('mapBox'));

  var color = ['#46bee9'];
  var series = [];
  var res = [];
  var lineData = [
    {
      "val":1,
      "blat":31.84,
      "blon":117.14,
      "elat":31.86,
      "elon":117.11,
      "bcitysim":"德拓",
      "ecitysim":"航空新城"
    },
    {
      "val":1,
      "blat":31.84,
      "blon":117.14,
      "elat":31.868625,
      "elon":117.491498,
      "bcitysim":"德拓",
      "ecitysim":"肥东"
    },
    {
      "val":2,
      "blat":31.862149,
      "blon":117.11935,
      "elat":31.868625,
      "elon":117.491498,
      "bcitysim":"肥西",
      "ecitysim":"肥东"
    },
    {
      "val":2,
      "blat":31.9696,
      "blon":117.365358,
      "elat":31.899011,
      "elon":117.243776,
      "bcitysim":"瑶海区",
      "ecitysim":"庐阳区"
    },

    {
      "val":1,
      "blat":31.9696,
      "blon":117.365358,
      "elat":31.251488,
      "elon":117.289844,
      "bcitysim":"瑶海区",
      "ecitysim":"庐江县"
    }
  ];
  for (var i = 0; i < lineData.length; i++) {
    res.push({
      fromName:lineData[i].bcitysim,
      toName:lineData[i].ecitysim,
      coords: [
        [lineData[i].blon,lineData[i].blat],
        [lineData[i].elon, lineData[i].elat]
      ],
      count:lineData[i].val
    });

  }
  var planePath = 'path://M 916.705 440.27 L 531.681 217.987 c -21.0794 -12.1881 -47.9532 -13.0872 -70.631 0 s -35.3655 36.7641 -35.3655 61.1403 v 97.305 H 127.376 c -34.766 0 -62.9385 28.1725 -62.9385 62.9385 v 145.258 c 0 34.766 28.1725 62.9385 62.9385 62.9385 h 298.309 v 90.4117 c 0 26.674 13.8864 52.7485 38.6622 67.0345 c 24.7758 14.386 54.247 13.3869 77.5243 0 l 374.834 -216.389 c 25.6749 -14.6857 42.8581 -42.4585 42.8581 -74.2275 c 0 -31.4693 -17.1832 -59.2421 -42.8581 -74.1276 Z';

  series.push({

    //目的地
    name: {
      formatter:function(param){
        return param.data.fromName
      }},
    type: 'lines',
    zlevel: 1,
    effect: {
      show: true,
      constantSpeed: 20,
      symbol: planePath,
      symbolSize: 10,
      trailLength: 0,
      color:"#f00"
    },
    tooltip:{
      formatter:function(param){
        return param.data.fromName+'>'+param.data.toName+'<br>趟次：'+param.data.count
      }
    },


   /* label: {
      normal: {
        show: true,
        position: 'right',
        formatter:function(param){
        return param.data.toName
      }
      }
    },*/
// lineStyle出发到目的地 的线条颜色
    lineStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0, color: '#58B3CC'
        }, {
          offset: 1, color: '#F58158'
        }], false),
        width: 2,
        opacity: 0.5,
        curveness: 0.1//幅度
      }
    },
    data: res//开始到结束数据
  },
   {
    type: 'map',
    mapType: 'hefei',
    top:'100%',
    tooltip:{
      show:false
    },
    itemStyle: {
      areaColor: '#00196d',
      borderColor: '#0a53e9'
    },
    emphasis:{
      label:{
        show:false
      },
      itemStyle:{
        areaColor: '#00196d',
        borderColor: '#0a53e9'
      }
    }
  });


  option = {
    backgroundColor: '#FFFFFF',
    title: {
      text: '模拟航班假数据',
      textStyle: {
        color: '#ffffff'
      }
    },
    legend: {
      show: true,
      selected: {},
      x: 'left',
      orient: 'vertical',
      textStyle: {
        color: 'white'
      },
      data: []
    },
    tooltip : {
      trigger: 'item',
      show : true,
    },
    geo: {
      map: 'hefei',
      label: {
        show:true
      },
      emphasis: {
        show: false,
      },
      top:'1%',
      roam: false,
      itemStyle: {
        areaColor: '#FFFFFF',
        borderColor: '#96bcf2',
        shadowColor: '#96bcf2',
        shadowBlur: 20
      }
    },
    series: series
  };
  // 使用制定的配置项和数据显示图表
  mapBoxEchart.setOption(option);
  // echart图表自适应
  window.addEventListener("resize", function() {
    mapBoxEchart.resize();
  });
</script>
</body>
</html>
